import React, { useEffect, useState,useRef } from "react";
import {useHistory} from "react-router-dom"
import s from "./style.module.less";
import Header from "@/components/Header";
import { Toast } from "zarm";
import { get } from "@/utils";
import qs from "query-string";
import cx from 'classnames'
import CustomIcon from "@/components/CustomIcon"
import PopupAdd from "@/components/PopupAdd"


const Detail = () => {
  const [detail, setDetail] = useState({});
  const modalRef = useRef()

  const history = useHistory()

  //   这是拼接在url后面的参数
  const { id } = qs.parse(location.search);

  useEffect(() => {
    getDetail();
  }, []);

  const getDetail = async () => {
    const { data } = await get(`/api/bill/detail?id=${id}`);
    if (data.code === 404) {
      console.log("???");
      return
    }
    console.log("查询的账单信息", data);
    // let {amount,date,pay_type,remark,type_id,type_name} = {...data[0]}
    // // setDetail({...data})
    // console.log('1111',{amount,date,pay_type,remark,type_id,type_name});
    // setDetail({amount,date,pay_type,remark,type_id,type_name})
  };

  // 删除键
  const deleteDetail = async() => {
    // 准备删除
    const {data} = await get(`/api/bill/deleteBill?id=${id}`)
    console.log('111',data);
    if(data){
      console.log('删除成功');
      Toast.show('删除成功!')
      history.push('/')
    }
  };



  //   编辑
  const openModal = () => {
    // 拉起添加账单的浮层，并将本账单的数据传入，用于初始渲染
    
  };
  return <div className={s.detail}>
      <Header title="账单详情"></Header>
      <div className={s.card}>
        <div className={s.type}>
          {/* 账单类别 */}
          <span
            className={cx({
              [s.expense]: detail.pay_type == 1,
              [s.income]: detail.pay_type == 2,
            })}
          >
            <CustomIcon
              className={s.iconfont}
              type={detail.type_id ? typeMap[detail.type_id].icon : 1}
            />
          </span>
          <span>奖金</span>
        </div>
        <div className={s.number}>+258.00</div>
        <div className={s.info}>
          <span>记录时间</span>
          <span>2022-01-05</span>
        </div>
        <div className={s.remark}>
          <span>备注</span>
          <span>这里是尝试备注</span>
        </div>
        <div className={s.operation}>
          <span onClick={deleteDetail}>
            <CustomIcon type="shanchu" />
            删除
          </span>
          <span onClick={openModal}>
            <CustomIcon type="tianjia" />
            编辑
          </span>
        </div>
      </div>

      {/* 增加账单浮层 */}
      <PopupAdd  ref={modalRef}></PopupAdd>
    </div>
};

export default Detail;
